<div class="sidebar-wrapper">
  <div class="logo">
    <a href="javascript:void(0);" class="simple-text">
      <div class="logo-img">
        <img src="./images/angular2-logo.png">
      </div>
      Work Admin
    </a>
  </div>
  <perfect-scrollbar class="scroller" wheel-propagation="true" wheel-speed="10" min-scrollbar-length="20">
    <ul class="nav" >
      <li ng-show="isNotMobileMenu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          <i class="ti-panel"></i>
          <p>Stats</p>
        </a>
      </li>
      <li class="dropdown" ng-if="isNotMobileMenu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          <i class="ti-bell"></i>
          <p class="notification">5</p>
          <p>Notifications</p>
          <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Notification 1</a></li>
          <li><a href="#">Notification 2</a></li>
          <li><a href="#">Notification 3</a></li>
          <li><a href="#">Notification 4</a></li>
          <li><a href="#">Another notification</a></li>
        </ul>
      </li>
      <li ng-if="isNotMobileMenu">
        <a href="#">
      	<i class="ti-settings"></i>
      	<p>Settings</p>
        </a>
      </li>
      <li class="divider" ng-if="isNotMobileMenu"></li>
      <li ng-repeat="menuItem in menuItems" ng-class="{'active':$state.includes(menuItem.path)}">
        <a ui-sref="{{menuItem.path}}" ng-if="!menuItem.children">
          <i class="{{'fa '+menuItem.icon}}"></i>
          <p>{{menuItem.name}}</p>
        </a>
        
         <a href="javascript:void(0);" data-toggle="collapse" data-target="{{'#'+menuItem.id}}"  ng-if="menuItem.children" aria-expanded="{{$state.includes(menuItem.path)}}">
          <i class="{{'fa '+menuItem.icon}}"></i>
          <p>{{menuItem.name}}<b class="caret"></b></p>
        </a>
        
        <div class="collapse" ng-class="{'in':$state.includes(menuItem.path)}" id="{{menuItem.id}}" ng-if="menuItem.children">
          <ul class="nav child">
              <li ng-repeat="menuItemChild in menuItem.children" ui-sref-active="active" >
                <a ui-sref="{{menuItemChild.path}}">
                  <i class="{{'fa '+menuItemChild.icon}}"></i>
                  <p>{{menuItemChild.name}}</p>
                </a>
              </li>
           </ul>
        </div>
      </li>
    </ul>
  </perfect-scrollbar>
</div>
